<template>
	<div class="app-container home">
		<!-- 第一张卡片 -->
		<!-- <el-card class="update-log"> -->
		<!-- 	<div slot="header" class="clearfix">
						<span class="headerTitle">智能锁概况</span>
					</div> -->
		<el-row :gutter="40" class="panel-group">
			<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
				<div class="card-panel bg1">
					<div class="card-panel-icon-wrapper totalRechargeIcon">
						<i class="iconfont">&#xe6f5;</i>
					</div>
					<div class="card-panel-description">
						<count-to :start-val="0" :end-val="totalLockCount" :duration="2600" class="card-panel-num" />台
						<div class="card-panel-text">
							总数
						</div>
					</div>
				</div>
			</el-col>
			<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
				<div class="card-panel bg2">
					<div class="card-panel-icon-wrapper rechargeTodayIcon">
						<i class="iconfont">&#xe643;</i>
					</div>
					<div class="card-panel-description">

						<count-to :start-val="0" :end-val="onlineCount" :duration="3000" class="card-panel-num" />台
						<div class="card-panel-text">
							在线数
						</div>
					</div>
				</div>
			</el-col>
			<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
				<div class="card-panel bg3" @click="handleSetLineChartData('purchases')">
					<div class="card-panel-icon-wrapper rechargeYesterdayIcon">
						<i class="iconfont">&#xe683;</i>
					</div>
					<div class="card-panel-description">

						<count-to :start-val="0" :end-val="offlineCount" :duration="3200" class="card-panel-num" />台
						<div class="card-panel-text">
							离线数
						</div>
					</div>
				</div>
			</el-col>
			<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
				<div class="card-panel bg4">
					<div class="card-panel-icon-wrapper rechargeCurrentMonthIcon">
						<i class="iconfont">&#xe795;</i>
					</div>
					<div class="card-panel-description">

						<count-to :start-val="0" :end-val="malfunctioningCount" :duration="3600"
							class="card-panel-num" />台
						<div class="card-panel-text">
							故障数
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>

</template>

<script>
	import CountTo from 'vue-count-to'
	import {
		getLockCount,
	} from "@/api/lock/smartlocks";

	export default {
		name: "toheader",
		components: {
			CountTo,
		},
		data() {
			return {
				//今日注册用户数
				todayUserCount: 0,
				//故障数
				malfunctioningCount: 0,
				//在线数
				onlineCount: 0,
				//总数
				totalLockCount: 0,
				//离线数
				offlineCount: 0,
				current: '',
				totalRecharge: 0,
				rechargeToday: 0,
				monthDays: [],
				monthPrices: [],
				rechargeYesterday: 0,
				rechargeCurrentMonth: 0,
				allOrders: 0,
				toDelivered: 0,
				toReceived: 0,
				completed: 0,
				userCount: 0,
				todayAddUser: 0,
				downloadCount: 0,
				newUserCount: 0,
				oldUserCount: 0,
				yesterdayAddUser: 0,
				currentMonthAddUser: 0,
			};
		},
		created() {
			// this.getInfo();
			this.getLockCount();
			// this.getUserCount();
			// this.getVXUserCount();
		},
		methods: {
			//查询用户数量
			getVXUserCount() {
				selectVXUserCount().then(response => {
					this.totalUserCount = response.data.totalUserCount;
					this.vxCount = response.data.vxCount;
				})
			},
			//查询锁数量
			getLockCount() {
				getLockCount().then(response => {
					this.installationCount = response.data.awaiting_installation_count;
					this.malfunctioningCount = response.data.malfunctioning_count;
					this.onlineCount = response.data.online_count;
					this.offlineCount = response.data.offline_count;
					this.totalLockCount = response.data.totalLockCount;
				})
			},
			goTarget(href) {
				window.open(href, "_blank");
			},
			handleSetLineChartData(type) {

			},
			getInfo() {
				this.loading = true;
				info().then(response => {
					this.current = response.data.current;
					this.totalRecharge = response.data.totalRecharge;
					this.rechargeToday = response.data.rechargeToday;
					this.rechargeYesterday = response.data.rechargeYesterday;
					this.rechargeCurrentMonth = response.data.rechargeCurrentMonth;
					this.allOrders = response.data.allOrders;
					this.toDelivered = response.data.toDelivered;
					this.toReceived = response.data.toReceived;
					this.completed = response.data.completed;
					this.userCount = response.data.userCount;
					this.todayAddUser = response.data.todayAddUser;
					this.downloadCount = response.data.downloadCount;
					this.newUserCount = response.data.newUserCount;
					this.oldUserCount = response.data.oldUserCount;
					this.yesterdayAddUser = response.data.yesterdayAddUser;
					this.currentMonthAddUser = response.data.currentMonthAddUser;
					this.monthDays = response.data.monthDays;
					this.monthPrices = response.data.monthPrices;
					this.registerUsercCounts = response.data.registerUsercCounts;
					this.downloadAPPCounts = response.data.downloadAPPCounts;
					this.onLineNewUserCounts = response.data.onLineNewUserCounts;
					this.onLineOldUserCounts = response.data.onLineOldUserCounts;
					this.dateTimes = response.data.dateTimes;
					this.loading = false;
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.app-container {
		padding: 0px 10px;
	}

	.bg1 {
		background: url(../../../assets/images/home/1.png) !important;
		background-size: 100% 100% !important;
	}

	.bg2 {
		background: url(../../../assets/images/home/2.png) !important;
		background-size: 100% 100% !important;
	}

	.bg3 {
		background: url(../../../assets/images/home/3.png) !important;
		background-size: 100% 100% !important;
	}

	.bg4 {
		background: url(../../../assets/images/home/4.png) !important;
		background-size: 100% 100% !important;
	}

	.box-chart {
		display: flex;
		flex-wrap: wrap;
	}

	.box-chart-item {
		flex: 1;
	}

	@font-face {
		font-family: 'iconfont';
		src: url('../../../assets/iconfont/iconfont.ttf') format('truetype');
		/* 这里修改为你的字体文件路径 */
	}

	.iconfont {
		font-family: 'iconfont' !important;
		font-size: 50px;
		font-style: normal;
		/* 取消斜体效果 */
	}

	.headerTitle {
		font-weight: 600;
	}

	.home {
		blockquote {
			padding: 10px 20px;
			margin: 0 0 20px;
			font-size: 17.5px;
			border-left: 5px solid #eee;
		}

		hr {
			margin-top: 20px;
			margin-bottom: 20px;
			border: 0;
			border-top: 1px solid #eee;
		}

		.col-item {
			margin-bottom: 20px;
		}

		ul {
			padding: 0;
			margin: 0;
		}

		font-family: "open sans",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;
		font-size: 13px;
		color: #676a6c;
		overflow-x: hidden;

		ul {
			list-style-type: none;
		}

		h4 {
			margin-top: 0px;
		}

		h2 {
			margin-top: 10px;
			font-size: 26px;
			font-weight: 100;
		}

		p {
			margin-top: 10px;

			b {
				font-weight: 700;
			}
		}

		.update-log {
			ol {
				display: block;
				list-style-type: decimal;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0;
				margin-inline-end: 0;
				padding-inline-start: 40px;
			}
		}
	}

	.panel-group {
		margin-top: 18px;

		.card-panel-col {
			margin-bottom: 32px;
		}

		.card-panel {
			height: 140px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.totalRechargeIcon {
				color: #f0fdfd;
			}

			.rechargeTodayIcon {
				color: #f0fdfd;
			}

			.rechargeYesterdayIcon {
				color: #f0fdfd;
			}

			.rechargeCurrentMonthIcon {
				color: #f0fdfd;
			}

			.allOrdersIcon {
				color: #f0fdfd;
			}

			.toDeliveredIcon {
				color: #C5E99B;
			}

			.toReceivedIcon {
				color: #791E94;
			}

			.completedIcon {
				color: #f9c00c;
			}

			.userCountIcon {
				color: #f100e5;
			}

			.todayAddUserIcon {
				color: #e94e77;
			}

			.yesterdayAddUserIcon {
				color: #ff4e50;
			}

			.currentMonthAddUserIcon {
				color: #3b8686;
			}

			.card-panel-icon-wrapper {
				float: left;
				margin: 14px 0 0 14px;
				padding: 16px;
				transition: all 0.38s ease-out;
				border-radius: 6px;
			}

			.card-panel-icon {
				float: left;
				font-size: 48px;
			}

			.card-panel-description {
				float: right;
				font-weight: bold;
				margin: 26px;
				color: white;
				margin-left: 0px;

				.card-panel-text {
					color: white;
					font-size: 24px;
				}

				.card-panel-num {
					font-size: 28px;
				}
			}
		}
	}

	@media (max-width:550px) {
		.card-panel-description {
			display: none;
		}

		.card-panel-icon-wrapper {
			float: none !important;
			width: 100%;
			height: 100%;
			margin: 0 !important;

			.svg-icon {
				display: block;
				margin: 14px auto !important;
				float: none !important;
			}
		}
	}
</style>
